權重的概念讓我聯想到拍賣會，HTML元素的樣式就像是拍賣會上被競標的商品，而選擇器們就像是競標的買家一樣，只有出價最高的人才能獲得競標商品。

Cascading代表的意義?

CSS是Cascading Style Sheets的縮寫，而第一個字cascading(階層式的)很明確地描述出了CSS在增加樣式時所遵循的規則。瀏覽器在讀取 CSS 樣式表時，會從上到下一層一層讀取下來，同個HTML元素如果有重複設定到相同屬性的話，在使用同樣選擇器的狀態下，後面出現的樣式設定會覆蓋掉前面的。

例如:

<p>我上班領的不是薪水，是精神賠償金。</p>

p{
	color:red; 
	background-color: gray;
}

p{
	color:blue; 
	background-color: yellow; 
}

瀏覽器上看到會是藍色的字，黃色的背景顏色，因為後免寫的樣式覆蓋掉了前面寫的

什麼是權重(Specificity)?

權重是給瀏覽器用來判定HTML元素該套用哪個CSS選擇器寫的屬性時的判斷依據。
雖然瀏覽器會由上到下解析CSS，但如果遇到了使用不同選擇器來定義相同屬性的HTML元素的狀況時，權重大的選擇器會覆蓋掉權重小的，而不是遵照後面寫的樣式覆蓋掉前面的規則。

例如:

<p class="p-color">我上班領的不是薪水，是精神賠償金。</p>

.p-color{
	color:red; 
	background-color: gray;
}

p{
	color:blue; 
	background: yellow; 
}

p 標籤選擇器寫的位置在 .p-color類別選擇器之後，但套用到的樣式卻是放在前面的.p-color，原因即是類別選擇器的權重大於標籤選擇器

選擇器的權重

以下是依照權重高到低順序為排列的選擇器:

1. ID選擇器 (例如: #example)

2. 類別選擇器(例如: .example)、屬性選擇器 (例如: [type="radio"])和偽類(例如: :hover)

3. HTML標籤選擇器(例如: h1)和偽元素(例如: ::before)

4. 全體選擇器(例如:*)不受權重影響

參考資料:Specificity- Selector Types

行內樣式(Inline styles)的權重

除了可以使用選擇器來改變元素的樣式之外，還可以使用行內樣式的改變。
而行內樣式可以覆蓋掉外部載入的CSS，因此也具有很高的權重。

例如:

<p style="color:blue;" class="p-color">我上班領的不是薪水，是精神賠償金。</p>

.p-color{
	color:red; 
}

p{
	color: green; 
}

可以看到字體呈現的顏色是藍色，因為行內樣式的權重高於標籤選擇器和類別選擇器

耍特權的!important

!important 其實和權重無關，但只要使用了!important就會覆蓋掉所有的樣式設定，所以很少會使用到。

Specificity- The !important exception

!important 使用方式

例如:

 <p id="main-title" class="title" style="color: purple;">我上班領的不是薪水，是精神賠償金。</p>

#main-title { color: red; }
.title { color: pink !important; }

可以看到本來應該蓋掉.title類別選擇器的行內樣式style="color: purple;
在加上了!important之後，直接覆蓋掉了行內樣式對於字體顏色屬性的設定

結論: 先看權重大小，再看先後順序

!important > inline style > ID >類別選擇器/偽類/屬性選擇器 > 標籤選擇器/偽元素

可以假設如下:

!important：10000 分
inline style：1000 分
ID 選擇器：100 分
class選擇器/偽類/屬性選擇器：10 分
HTML 標籤選擇器/偽元素：1 分

運用這些分數加總來計算會套用到哪個樣式?

例如:

  <h1 class="title">A candle loses nothing by lighting another candle.</h1>

.title{
	color: red;
	background-color:pink;
}

h1{
	color:blue;
	background-color:yellow;
}

h1 是1分
.title 是10分
所以是套用到.title內寫的樣式

參考資料: 【前端幫幫忙】第5期關於CSS權重，你瞭解多少？
圖片來源:https://www.sothebys.com/en/about

以上為個人學習筆記整理
若有錯誤，歡迎指正